﻿        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>面试结果登记</title>
            <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
            <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
            <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
            <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
            <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
            <style>
        
                .container {
                    padding: 20px;
                    max-width: 1200px;
                    margin: 0 auto;
                }

                .breadcrumb {
                    margin-bottom: 20px;
                    font-size: 14px;
                    color: #333;
                }

                .form-title {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 20px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #eee;
                }

                .action-buttons {
                    margin-bottom: 20px;
                    display: flex;
                    gap: 10px;
                }

                .interview-form {
                    background-color: #fff;
                    border-radius: 5px;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    padding: 20px;
                }

                .evaluation-select {
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div id="app" class="container">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <span>您正在做的业务是：人力资源--招聘管理--面试管理--筛选</span>
                </div>

                <div class="form-title">面试结果登记表单</div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <el-button type="primary" v-on:click="submitForm">筛选</el-button>
                    <el-button v-on:click="resetForm">返回</el-button>
                </div>

                <!-- 面试结果登记表单 -->
                <el-form ref="formRef"
                         :model="formData"
                         :rules="rules"
                         label-width="120px"
                         class="interview-form">
            <!-- 图片显示行 - 位于表单右侧 -->
            <el-row :gutter="20" class="image-row">
                <el-col :span="16">
                    <!-- 表单内容区域保持不变 -->
                </el-col>
                <el-col :span="8">
                    <el-form-item label="个人照片">
                        <div class="image-container">
                            <img v-if="formData.human_picture" :src="formData.human_picture" class="user-image" alt="个人照片">
                            <el-image v-else class="placeholder-image" src="https://via.placeholder.com/150x200?text=暂无照片" fit="cover"></el-image>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
                    <!-- 职位信息行 - 包含级联选择器 -->
                    <el-row :gutter="16">
                
                    @* <el-form-item label="职位分类及名称" prop="majorId"> *@
                    @*     <el-cascader v-model="selectedCascaderValue" *@
                    @*                  :options="cascaderOptions" *@
                    @*                  :props="cascaderProps" *@
                    @*                  v-on:change="handleCascaderChange" *@
                    @*                  placeholder="请选择职位分类及名称" *@
                    @*                  :loading="isLoading" /> *@
                    @* </el-form-item> *@
                    <el-col :span="8">
                        <el-form-item label="职位分类" prop="major_kind_name">
                        <el-select v-model="formData.human_major_kind_name"
                                       placeholder="--请选择--"
                                       v-on:change="handleMajorKindChange">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in majorKindOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="职位名称" prop="major_name">
                        <el-select v-model="formData.human_major_name"
                                       placeholder="--请选择--"
                                       v-on:change="handleMajorIdChange">
                                <!-- 新增事件 -->
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in majorOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                
                        <el-col :span="8">
                            <el-form-item label="招聘类型" prop="engage_type">
                                <el-input v-model="formData.engage_type" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 职位信息补充行 -->
                    @* <el-row :gutter="16"> *@
                    @*     <el-col :span="8"> *@
                    @*         <el-form-item label="职位分类ID" prop="human_major_kind_id"> *@
                    @*             <el-input v-model="formData.human_major_kind_id" readonly></el-input> *@
                    @*         </el-form-item> *@
                    @*     </el-col> *@
                    @*     <el-col :span="8"> *@
                    @*         <el-form-item label="职位分类名称" prop="human_major_kind_name"> *@
                    @*             <el-input v-model="formData.human_major_kind_name" readonly></el-input> *@
                    @*         </el-form-item> *@
                    @*     </el-col> *@
                    @*     <el-col :span="8"> *@
                    @*         <el-form-item label="职位ID" prop="human_major_id"> *@
                    @*             <el-input v-model="formData.human_major_id" readonly></el-input> *@
                    @*         </el-form-item> *@
                    @*     </el-col> *@
                    @*     <el-col :span="8"> *@
                    @*         <el-form-item label="职位名称" prop="human_major_name"> *@
                    @*             <el-input v-model="formData.human_major_name" readonly></el-input> *@
                    @*         </el-form-item> *@
                    @*     </el-col> *@
                    @* </el-row> *@

                    <!-- 基本信息行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="姓名" prop="human_name">
                                <el-input v-model="formData.human_name" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别" prop="human_sex">
                                <el-input v-model="formData.human_sex" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="EMAIL" prop="human_email">
                                <el-input v-model="formData.human_email" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 联系方式行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="电话号码" prop="human_telephone">
                                <el-input v-model="formData.human_telephone" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="家庭电话" prop="human_homephone">
                                <el-input v-model="formData.human_homephone" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机" prop="human_mobilephone">
                                <el-input v-model="formData.human_mobilephone" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 地址信息行 -->
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <el-form-item label="住址" prop="human_address">
                                <el-input v-model="formData.human_address" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="邮编" prop="human_postcode">
                                <el-input v-model="formData.human_postcode" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 个人信息1行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="国籍" prop="human_nationality">
                                <el-input v-model="formData.human_nationality" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生地" prop="human_birthplace">
                                <el-input v-model="formData.human_birthplace" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="生日" prop="human_birthday">
                                <el-input v-model="formData.human_birthday" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 个人信息2行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="民族" prop="human_race">
                                <el-input v-model="formData.human_race" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="宗教信仰" prop="human_religion">
                                <el-input v-model="formData.human_religion" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="政治面貌" prop="human_party">
                                <el-input v-model="formData.human_party" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 个人信息3行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="身份证号码" prop="human_idcard">
                                <el-input v-model="formData.human_idcard" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="年龄" prop="human_age">
                                <el-input v-model="formData.human_age" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业学校" prop="human_college">
                                <el-input v-model="formData.human_college" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历" prop="human_educated_degree">
                                <el-input v-model="formData.human_educated_degree" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 教育信息行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="教育年限" prop="human_educated_years">
                                <el-input v-model="formData.human_educated_years" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历专业" prop="human_educated_major">
                                <el-input v-model="formData.human_educated_major" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="薪酬要求" prop="demand_salary_standard">
                                <el-input v-model="formData.demand_salary_standard" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="注册时间">
                                <el-input v-model="formData.regist_time" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 个人特长行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="特长" prop="human_specility">
                                <el-input v-model="formData.human_specility" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="爱好" prop="human_hobby">
                                <el-input v-model="formData.human_hobby" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="推荐人" prop="checker">
                                <el-input v-model="formData.checker"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            @* <el-form-item label="推荐时间" prop="check_time"> *@
                            @*     <el-input v-model="formData.check_time"></el-input> *@
                            @* </el-form-item> *@
                    <el-form-item label="推荐时间" prop="check_time">
                        <el-date-picker v-model="formData.check_time"
                                        type="date"
                                        placeholder="推荐时间"
                                        :disabled-date="disabledDate"
                                        style="width: 100%"></el-date-picker>
                    </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 个人履历行 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="个人履历" prop="human_history_records">
                                <el-input type="textarea"
                                          v-model="formData.human_history_records"
                                          :rows="4"
                                          readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 备注行 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="备注" prop="remark">
                                <el-input type="textarea"
                                          v-model="formData.remark"
                                          :rows="4"
                                          readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 推荐意见行 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            @* <el-form-item label="推荐意见" prop="recomandation"> *@
                            @*     <el-input type="textarea" *@
                            @*               v-model="formData.recomandation" *@
                            @*               :rows="4" *@
                            @*               ></el-input> *@
                            @* </el-form-item> *@
                    <el-form-item label="推荐意见" prop="recomandation">
                        <el-select v-model="formData.recomandation" placeholder="请选择">
                            <el-option value="" label="--请选择--"></el-option>
                            <el-option value="推荐" label="推荐"></el-option>
                            <el-option value="不推荐" label="不推荐"></el-option>
                        </el-select>
                    </el-form-item>
                        </el-col>
                    </el-row>

                   </el-form>
            </div>

            <script type="text/javascript">
            const { createApp, ref, watch, onMounted, nextTick } = Vue;
            const { ElMessage } = ElementPlus;

                createApp({
                    setup() {
                        // 表单数据
                        const formData = ref({
                            res_id:null,
                            // 职位信息

                            human_major_kind_id: '',
                            human_major_kind_name: '',
                            human_major_id: '',
                            human_major_name: '',
                            engage_type: '',

                            // 个人基本信息
                            human_name: '',
                            human_sex: '',
                            human_email: '',
                            human_telephone: '',
                            ///uploads/2025/06/20/20250620120236201.jpg
                            human_picture:'/uploads/2025/06/20/20250620120236201.jpg',
                            human_homephone: '',
                            human_mobilephone: '',
                            human_address: '',
                            human_postcode: '',
                            human_nationality: '',
                            human_birthplace: '',
                            human_birthday: '',
                            human_race: '',
                            human_religion: '',
                            human_party: '',
                            human_idcard: '',
                            human_age: '',
                            human_college: '',
                            human_educated_degree: '',
                            human_educated_years: '',
                            human_educated_major: '',
                            demand_salary_standard: '',
                            regist_time: '',
                            human_specility: '',
                            human_hobby: '',
                            checker: '',
                            check_time: '',
                            human_history_records: '',
                            remark: '',
                            recomandation: '',

                            // 面试评价
                            interview_amount: '0',
                            image_degree: 'A',
                            native_language_degree: 'A',
                            foreign_language_degree: 'A',
                            response_speed_degree: 'A',
                            eq_degree: 'A',
                            iq_degree: 'A',
                            multi_quality_degree: 'A',
                            register: 'zhangsan',
                            registe_time: ''
                        });

                        // 级联选择器相关数据
                        const selectedCascaderValue = ref([]);
                        const cascaderOptions = ref([]);
                        const cascaderProps = ref({
                            value: 'value',
                            label: 'label',
                            children: 'children'
                        });
                        const isLoading = ref(false);

                        console.log("11",formData)
                        // 面试次数显示文本
                        const interviewAmountText = ref(`第${formData.value.interview_amount}次面试`);

                        // 表单验证规则
                        const rules = ref({
                            registe_time: [{ required: true, message: '请选择面试时间', trigger: 'blur' }]
                        });

                        // 表单引用
                        const formRef = ref(null);
                        // 加载职位级联数据
                        const loadJobCascaderData = async () => {
                            isLoading.value = true;
                            try {
                                const response = await axios.get('/engage/GetJobCascaderData');
                                if (response.status === 200 && response.data) {
                                    cascaderOptions.value = response.data;
                                    console.log(cascaderOptions.value)
                                } else {
                                    throw new Error(response.data?.message || '获取职位数据失败');
                                }
                            } catch (error) {
                                console.error('加载职位数据错误:', error);
                                ElMessage.error('加载职位数据失败，请稍后再试');
                            } finally {
                                isLoading.value = false;
                            }
                        }

                                    const handleCascaderChange = (value) => {
            // 重置职位信息
            formData.value.human_major_kind_id = '';
            formData.value.human_major_kind_name = '';
            formData.value.human_major_id = '';
            formData.value.human_major_name = '';

            if (!value || value.length === 0) return;

            // 处理职位分类
            if (value.length >= 1) {
                const category = cascaderOptions.value.find(c => c.value === value[0]);
                if (category) {
                    formData.value.human_major_kind_id = category.value;
                    formData.value.human_major_kind_name = category.label;

                    // 处理具体职位
                    if (value.length >= 2 && category.children) {
                        const job = category.children.find(j => j.value === value[1]);
                        if (job) {
                            formData.value.human_major_id = job.value;
                            formData.value.human_major_name = job.label;
                        }
                    }
                }
            }
        };

                    const mapRowDataToFormData = (form) => {
                console.log('映射数据:', form);
                return {
                    human_major_kind_id: form.human_major_kind_id || '',
                    human_major_kind_name: form.human_major_kind_name || '',
                    human_major_id: form.human_major_id || '',
                    human_major_name: form.human_major_name || '',
                    engage_type: form.engage_type || ''
                };
            };

            // 初始化表单数据
            const initFormData = () => {
                const encodedData = new URLSearchParams(window.location.search).get('data');
                if (!encodedData) return;

                try {
                    const data = JSON.parse(decodeURIComponent(encodedData));
                    const mappedData = mapRowDataToFormData(data);

                    //更新表单数据
                    Object.assign(formData.value, mappedData);

                    //延迟设置级联选择值，确保选项已加载
                    nextTick(() => {
                        if (mappedData.human_major_kind_id && mappedData.human_major_id) {
                            selectedCascaderValue.value = [
                                mappedData.human_major_kind_id,
                                mappedData.human_major_id
                            ];
                            console.log('设置级联选择器值:', selectedCascaderValue.value);
                        } 
                    });
                } catch (error) {
                    console.error('解析数据失败:', error);
                }
            };

       

                // 监听URL变化并初始化表单
          
        

            // 监听URL变化并初始化表单
        

                        // 提交表单
                                       const submitForm = () => {
          formRef.value.validate(async (valid) => {
            if (valid) {
              try {
                console.log('提交表单数据:', formData.value)
                const response = await axios.post(
                  "/engage/Updateengage_resume",
                  formData.value,
                  { headers: { "Content-Type": "application/json" } }
                );

                console.log("响应数据:", response.data);
                ElMessage.success("提交成功");
                 window.location.href = "@Url.Action("resumechoose", "engage")";

              } catch (error) {
                console.error("错误:", error.response || error);

                // 显示详细的错误信息
                if (error.response?.data?.message) {
                  ElMessage.error("提交失败：" + error.response.data.message);
                } else {
                  ElMessage.error("提交失败，请检查网络连接");
                }
              }
            } else {
              console.log('表单验证失败');
              return false;
            }
          });
        }; 

                        // 重置表单
                        const resetForm = () => {
                            formRef.value.resetFields();
                            history.back();
                        };

                        // 从URL参数初始化表单数据
                        const initFormDataFromUrl = () => {
                            const encodedData = new URLSearchParams(window.location.search).get('data');
                            if (encodedData) {
                                try {
                                    const data = JSON.parse(decodeURIComponent(encodedData));
                                    //字段映射逻辑
                                    Object.assign(formData.value, {
                                        res_id:data.res_id,
                                        human_major_kind_id: data.human_major_kind_id || '',
                                        human_major_kind_name: data.human_major_kind_name || '',
                                        human_major_id: data.human_major_id || '',
                                        human_major_name: data.human_major_name || '',
                                        engage_type: data.engage_type || '',
                                        human_name: data.human_name || '',
                                        human_sex: data.human_sex || '',
                                        human_email: data.human_email || '',
                                        human_telephone: data.human_telephone || '',
                                        human_homephone: data.human_homephone || '',
                                        human_mobilephone: data.human_mobilephone || '',
                                        human_address: data.human_address || '',
                                        human_postcode: data.human_postcode || '',
                                        human_nationality: data.human_nationality || '',
                                        human_birthplace: data.human_birthplace || '',
                                        human_birthday: data.human_birthday || '',
                                        human_race: data.human_race || '',
                                        human_religion: data.human_religion || '',
                                        human_party: data.human_party || '',
                                        human_idcard: data.human_idcard || '',
                                        human_age: data.human_age || '',
                                        human_college: data.human_college || '',
                                        human_educated_degree: data.human_educated_degree || '',
                                        human_educated_years: data.human_educated_years || '',
                                        human_educated_major: data.human_educated_major || '',
                                        demand_salary_standard: data.demand_salary_standard || '',
                                        regist_time: data.regist_time || '',
                                        human_specility: data.human_specility || '',
                                        human_hobby: data.human_hobby || '',
                                        checker: data.checker || '',
                                        check_time: data.check_time || '',
                                        human_history_records: data.human_history_records || '',
                                        remark: data.remark || '',
                                        recomandation: data.recomandation || '',
                                        interview_amount: data.interview_amount || 1,
                                        register: data.register || ''
                                    });
                            //         nextTick(() => {
                            // if (formData.value.human_major_kind_id && formData.value.human_major_id) {
                            //      selectedCascaderValue.value = [
                            //           formData.value.human_major_kind_id,
                            //           formData.value.human_major_id
                            //      ];
                            //  console.log('设置级联选择器值:', selectedCascaderValue.value);
                            //     }
                            // });
                                } catch (error) {
                                    console.error('解析URL数据失败:', error);
                                }
                            }
                        };

                        // 组件挂载时初始化
                         onMounted(() => {
                       initFormData();
                loadJobCascaderData();
                initFormDataFromUrl();
            });
              watch(() => window.location.search, initFormData, { immediate: true });
        
                        // 监听面试次数变化
                

                        return {
                            formData,
                            selectedCascaderValue,
                            cascaderOptions,
                            cascaderProps,
                            isLoading,
                            interviewAmountText,
                            rules,
                            formRef,
                            handleCascaderChange,
                            submitForm,
                            resetForm

                        };
                    }
                })
             .use(ElementPlus, { locale: ElementPlusLocaleZhCn })
            .mount('#app');
            </script>
        </body>
        </html>